<template>
  <div class="card pb-4">
    <div class="card-header pb-0 p-3">
      <div class="row">
        <div class="col-5 d-flex align-items-center">
          <argon-button color="primary" size="sm" @click="viewAll" v-if="searchChartFlag == 1">View all</argon-button>
        </div>
        <div class="col-5 text-end" style="justify-content: flex-end; margin-left: auto;">
          <div class="input-group">
            <div class="mt-4">
              <el-input v-if="select == ''"
                disabled
                v-model="searchInput"
                placeholder="Please input"
                class="input-with-select"
              >
                <template #prepend>
                  <el-select v-model="select" placeholder="Key" style="width: 115px">
                    <el-option label="Name" value="1" />
                    <el-option label="Facility" value="2" />
                  </el-select>
                </template>
                <template #append>
                  <span class="input-group-text text-body" @click="searchBy">
                    <i class="fas fa-search" aria-hidden="true"></i>
                  </span>
                </template>
              </el-input>
              <el-input v-else
                v-model="searchInput"
                placeholder="Please input"
                class="input-with-select"
              >
                <template #prepend>
                  <el-select v-model="select" placeholder="Search type" style="width: 115px">
                    <el-option label="Name" value="1" />
                    <el-option label="Facility" value="2" />
                  </el-select>
                </template>
                <template #append>
                  <span class="input-group-text text-body" @click="searchBy">
                    <i class="fas fa-search" aria-hidden="true"></i>
                  </span>
                </template>
              </el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body p-3 pb-0 mb-0 table-responsive p-0">
      <table class="table align-items-center mb-0 text-center">
        <thead>
          <tr >
            <td class="text-uppercase text-secondary text-md font-weight-bolder">
              Facility Name
            </td>
            <td class="text-uppercase text-secondary text-md font-weight-bolder">
              User
            </td>
            <td class="text-uppercase text-secondary text-md font-weight-bolder">
              Order Price
            </td>
            <td class="text-uppercase text-secondary text-md font-weight-bolder">
              Service Time
            </td>
            <td class="text-uppercase text-secondary text-md font-weight-bolder">
              Booking period
            </td>
            <td class="text-uppercase text-secondary text-md font-weight-bolder">
              Order time
            </td>
            <td class="text-uppercase text-secondary text-md font-weight-bolder">
              PDF file
            </td>
            <td class="text-uppercase text-secondary text-md font-weight-bolder">
            </td>
          </tr>
        </thead>
        <tbody>
          <tr
            
            v-for="oitem in order_list" :key="oitem"
          >
            <td class="text-xs font-weight-bold mb-0">
              <h6 class="mb-0 text-dark font-weight-bold text-md">{{ oitem.order_name }}</h6>
              
              <span class="text-xs">#{{ oitem.order_id }}</span>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">{{ oitem.user_name }}</p>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">${{ oitem.price }}</p>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">{{ oitem.service_time }}</p>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">{{ oitem.detail_time }}</p>
              
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">{{ oitem.order_time }}</p>
              
            </td>  
            <td class="text-xs font-weight-bold mb-0">
              <p>
                <a class="btn btn-link text-dark text-sm mb-0 px-0 ms-4" :href="'./PDF/'+ oitem.order_id+'.pdf'" target="_blank">
                <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i> PDF
                </a>
              </p>
            </td>
            <td class="text-xs font-weight-bold mb-0">
              <a class="btn btn-link text-danger text-gradient px-3 mb-0" @click="deleteOrder(oitem.id)">
                <i class="far fa-trash-alt me-2" aria-hidden="true"></i>Delete
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import ArgonButton from "@/components/ArgonButton.vue";
import axios from 'axios';
import {ElSelect, ElOption } from 'element-plus'
import {ElInput} from 'element-plus'

export default {
  name: "order-card",
  components: {
    ArgonButton,
    ElOption,
    ElSelect,
    ElInput,
  },
  data(){
    return{
      order_list:[],
      select:'',
      searchInput:'',
      searchChartFlag:0,
    }
  },
  methods:{
    searchBy(){
      let searchUrl = ''
      if(this.select == "1"){
        searchUrl = 'https://fitzone.work:8080/search_by_username'
      }
      else{
        searchUrl = 'https://fitzone.work:8080/search_by_facility'
      }
      axios({
        method:'get',
        baseURL: searchUrl,
        params:{
          user_name:this.searchInput,
          facility:this.searchInput
        }
      }).then(res =>{
        console.log(res)
        console.log(this.searchInput)
        this.order_list = res.data
      }).catch(err =>{
        console.log(err)
      }) 
      this.searchChartFlag = 1
    },
    viewAll(){
      axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/orderAll',
      }).then(res =>{
        console.log(res)
        this.order_list = res.data
      })
      this.searchChartFlag = 0
    },
    download(id){
      alert(id)
      
    },
    deleteOrder(id){
      axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/delete_order_by_employee',
        params:{
            id:id
        }
      }).then(res =>{
        console.log(res.data)
      })
      .catch(err =>{
      console.error(err);
      })
      location.reload()
    }
  },
  mounted(){
    axios
    .get('https://fitzone.work:8080/orderAll')
    .then(res =>{
      console.log(res);
      this.order_list = res.data;
    })
    .catch(err =>{
      console.error(err);
    })
  },

};

</script>
